<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="div1" class="box">div1(class="box")</div>
  <div id="div2" class="box">div2(class="box")</div>
  <div id="div3">div3</div>
  <span class="box">span(class="box")</span>

  <br>

  <ul>
    <li>AAAAA</li>
    <li title="hello">BBBBB(title="hello")</li>
    <li class="box">CCCCC(class="box")</li>
    <li title="hello">DDDDD(title="hello")</li>
  </ul>
  <!-- 
    1.选择器是什么？
      -有特定格式的字符串
    2.作用
      -用来查找特定页面元素
    3.基本选择器
      - #id id选择器
      - element 元素选择器
      - .class 属性选择器
      - * 任意标签
      - selector1,selector2,selector3 取多个选择器的并集(组合选择器)
      - selector1selector2selector3 取多个选择器的交集(相交选择器)
   -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    $(function () {
      // 需求一 选择id为div1的元素
      // $('#div1').css({
      //   background: 'red'
      // })

      // 需求二 选择所有的div元素
      // $('div').css({
      //   background: 'red'
      // })

      // 需求三 选择所有class属性为box的元素
      // $('.box').css({
      //   background: 'red'
      // })

      // 需求四 选择所有的div和span元素
      // $('div,span').css({
      //   background: 'red'
      // })

      // 需求五 选择所有class属性为box的div元素
      // $('div.box').css({
      //   background: 'red'
      // })

      // 需求六 选择所有的
      $('*').css({
        background: 'red'
      })
    })
  </script>
</body>
</html>